<template>
  <div>
    <!-- 头部 -->
    <div class="search">
      <a-form
        style="padding-top: 20px"
        ref="formRef"
        :rules="rules"
        :model="form"
        :hideRequiredMark="true"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row>
          <a-col :span="10" :lg="10" :xs="24" :md="10">
            <a-form-item label="认证状态">
              <a-row style="align-items: center">
                <a-col
                  :span="5"
                  v-for="(item, index) in statusList"
                  :offset="index == 0 ? 1 : ''"
                  :class="index == statusAct ? 'act-font-color' : ''"
                  @click="chooseStatus(item.status, index, item.subStatus)"
                  :key="item.status"
                  >{{ item.title }}
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="10" :md="6">
            <a-form-item>
              <a-range-picker
                v-model:value="time"
                style="width: 100%"
                :ranges="ranges"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4" :offset="1" :lg="4" :xs="6" :md="4">
            <a-form-item name="keyword" label="">
              <a-input v-model:value="form.keyword" placeholder="请输入搜索内容"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="2" :offset="1">
            <a-button type="primary" @click="search" class="d-a-center">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 列表 -->
    <a-table :columns="columns" :data-source="list" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540 ,x:'auto'}" -->

      <template #status="{ record }">
        <a-tag :color="nurseStatusColor(record.status)">{{ nurseStatus(record.status) }}</a-tag>
      </template>
      <!-- 所属医院 -->
      <template #hospitalAddress="{ text }">
        <div>
          <template v-if="hospitalAddress == null">
            <div>暂无</div>
          </template>
          <template v-else>
            <div>{{ text }}</div>
          </template>
        </div>
      </template>
      <template #operation="{ record }">
        <a-button type="link" v-has="{ a: $route, b: 1 }" @click="look(record.key, 0)">查看</a-button>
        <a-button type="link" v-if="record.status == 1" @click="deal(record.key, 1)" v-has="{ a: $route, b: 2 }">审核 </a-button>
      </template>
    </a-table>

    <template v-if="detailVisible">
      <CertificationDetail :visible="detailVisible" :isEdit="isEdit" :id="id" identity="6" @closeModal="closeModal"> </CertificationDetail>
    </template>

    <!-- 审核弹窗 -->
    <div>
      <a-modal class="audit-modal" :width="250" v-model:visible="visible" title="通过审核" @ok="handleOk" :footer="null" :closable="false">
        <a-row>
          <a-col :span="6" :offset="2">
            <a-button type="info" @click="cancle" class="d-a-center">取消</a-button>
          </a-col>
          <a-col :span="6" :offset="6">
            <a-button type="primary" @click="pass" class="d-a-center">确定</a-button>
          </a-col>
        </a-row>
      </a-modal>
    </div>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { selectAllNurseInfoCheck, selectNurseInfoCheckById } from '@/api/buisness/index.js'
import CertificationDetail from '../components/CertificationDetail.vue'
import { deleteObjBlank } from '@/assets/js/common.js'
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    CertificationDetail
  },
  setup() {
    const formRef = ref('')
    const form = reactive({})
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      loading: true,
      time: [],
      list: [],
      visible: false,
      detailVisible: false, //详情弹窗
      isEdit: '', //查看审核
      id: '' //认证
    })
    const rules = {}
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })

    const statusAct = ref(0) //状态激活

    // 状态列表
    const statusList = reactive([
      {
        title: '全部',
        status: 0,
        subStatus: 0
      },
      {
        title: '待审核',
        status: [1, 2],
        subStatus: 1
      },
      {
        title: '已认证',
        status: [2],
        subStatus: 2
      },
      {
        title: '未通过',
        status: [3],
        subStatus: 3
      }
    ])
    // 选择时间
    const panelChange = (date, dateString) => {
      form.createdAtBegin = dateString[0]
      form.createdAtEnd = dateString[1]
    }

    // 查询
    const search = () => {
      if (Object.keys(form).length == 0) {
        message.warning('请输入你要搜索的内容！！！')
        return
      }
      deleteObjBlank(form)
      page.current = 1
      init()
    }

    const columns = [
      {
        title: '护士ID',
        dataIndex: 'id',
        className: 'table',
        align: 'center'
      },
      {
        title: '姓名',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        className: 'table',
        align: 'center'
      },
      {
        title: '职称',
        dataIndex: 'position',
        className: 'table',
        align: 'center'
      },
      // {
      //   title: '工作年限',
      //   dataIndex: 'workingYears',
      //   className: 'table',
      //   align: 'center'
      // },
      {
        title: '申请时间',
        dataIndex: 'createdAt',
        className: 'table',
        align: 'center',
        sort: true
      },
      {
        title: '地理位置',
        dataIndex: 'address',
        className: 'table',
        align: 'center',
        ellipsis: true
      },
      {
        title: '所属医院',
        dataIndex: 'hospitalAddress',
        className: 'table',
        align: 'center'
        // slots: {
        //   customRender: "hospitalAddress",
        // },
      },
      // {
      //   title: "用户来源",
      //   dataIndex: "registSource",
      //   className: "table",
      //   align: "center",
      // },
      {
        title: '状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]
    const nurseStatusColor = computed(status => {
      return function (status) {
        if (status == 2) {
          return 'success'
        }
        if (status == 1) {
          return '#f50'
        }
        if (status == 3) {
          return 'error'
        }
      }
    })
    const nurseStatus = status => {
      let title = ''
      switch (status) {
        case 1:
          title = '待审核'
          break
        case 2:
          title = '已认证'
          break
        case 3:
          title = '未通过'
          break
      }
      return title
    }
    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }
    const chooseStatus = (status, subStatus, index) => {
      if (statusAct.value == index) return
      statusAct.value = index
      if (index == 0) {
        delete form['status']
        delete form['subStatus']
      } else {
        form.status = status
        form.subStatus = subStatus
      }
      page.current = 1
      init()
    }
    const handleOk = e => {
      visible.value = false
    }
    const closeModal = e => {
      data.detailVisible = false

      // 执行成功再次请求
      if (true) {
        init()
      }
    }
    // 取消
    const cancle = () => {
      visible.value = false
    }
    const pass = () => {
      visible.value = false
    }
    // 查看
    const look = (key, isEdit) => {
      data.detailVisible = true
      data.isEdit = 0
      data.id = key
    }

    // 审核
    const deal = (key, isEdit) => {
      data.detailVisible = true
      data.isEdit = 1
      data.id = key
    }
    init()
    async function init() {
      data.loading = true
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...form,
        identity: [6]
      }
      let res = await selectAllNurseInfoCheck(obj)
      if (res.success) {
        res.object.list.map(el => (el.key = el.id))
        let hospitalAddressList = res.object.list.map(el =>
          // (el.key = el.hospitalAddress)
          {
            if (el.hospitalAddress == null || el.hospitalAddress == '') {
              el.hospitalAddress = '暂无'
            }
          }
        )
        console.log(hospitalAddressList)

        data.list = res.object.list
        page.total = res.object.total
        data.loading = false
      }
    }
    return {
      ...toRefs(data),
      formRef,
      form,
      rules,
      columns,
      pagination,
      statusList,
      handleTableChange,
      search,
      deal,
      look,
      statusAct,
      panelChange,
      chooseStatus,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      cancle,
      handleOk,
      pass,
      nurseStatusColor,
      nurseStatus,
      closeModal
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
